<template>
	<view class="dialog_wrap" v-if="showPay">
	  <view class="opacity"></view>
	  <view class="box">
	    <image src="@/static/images/close.png" class="close_icon" @tap="hide"></image>
	    <view class="title">请输入支付密码</view>
	    <view class="info">王希希老师擅长初中数学</view>
	    <view class="money">560元</view>
	    <view class="flex_box pay_type">
	      <view class="flex1">支付方式</view>
	      <view>零钱</view>
	      <image src="@/static/images/right.png" class="right_icon"></image>
	    </view>
	    <view class="pass_box flex_box">
	      <input class="flex1 weui-input" v-for="item in 6"/>
	    </view>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPay:false
			}
		},
		onLoad() {

		},
		methods: {
			show() {
				this.showPay = true
			},
			hide() {
				this.showPay = false
			},
		}
	}
</script>

<style scoped>
	.dialog_wrap{
	  position: fixed;
	  left: 0;
	  top:0;
	  right: 0;
	  bottom: 0;
	  z-index: 9;
	}
	.opacity{
	  position: absolute;
	  left: 0;
	  top:0;
	  right: 0;
	  bottom: 0;
	  background:rgba(0,0,0,.5);
	}
	.box{
	  position: absolute;
	  left: 50%;
	  top:50%;
	  transform: translate(-50%,-50%);
	  width: 560rpx;
	  border-radius: 20rpx;
	  background:#fff;
	  padding:34rpx 40rpx 20rpx;
	  box-sizing: border-box;
	}
	.close_icon{
	  position: absolute;
	  right: 0;
	  top:-15rpx;
	  width: 40rpx;
	  height: 40rpx;
	}
	.title{
	  text-align: center;
	  font-size: 30rpx;
	  line-height: 42rpx;
	  margin-bottom: 15rpx;
	}
	.info{
	  text-align: center;
	  line-height: 38rpx;
	  color:#666;
	  margin-bottom: 5rpx;
	}
	.money{
	  text-align: center;
	  line-height: 48rpx;
	  font-size: 34rpx;
	  margin-bottom: 15rpx;
	  padding-bottom: 24rpx;
	  border-bottom:2rpx solid #D8D8D8;
	}
	.right_icon{
	  width: 18rpx;
	  height: 18rpx;
	  margin-left: 10rpx;
	}
	.flex_box{
	  display: flex;
	  align-items: center;
	}
	.flex1{
	  flex:1;
	  min-width: 0;
	}
	.weui-input{
	  width: 78rpx;
	  height: 78rpx;
	  border:2rpx solid #707070;
	  margin-left: -2rpx;
	  margin-top:28rpx;
	  text-align: center;
	}
</style>
